<template>
  <div class="autumn-container">
    <!-- 面包 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/dashboard' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>模型列表</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="autumn-center">
      <!-- 搜索栏 -->
      <div class="query-form">
        <autumn-search :modelValue="queryInfo" @search="search">
          <template #default>
            <el-form-item prop="key" label="标识">
              <el-input v-model="queryInfo.key" />
            </el-form-item>
            <el-form-item prop="name" label="名称">
              <el-input v-model="queryInfo.name" />
            </el-form-item>
          </template>
        </autumn-search>
      </div>

      <!-- 数据表格 -->
      <div class="main-body top">
        <autumn-table :page="page" @changePage="changePage">
          <template #button>
            <el-button type="primary" icon="el-icon-plus" v-if="$hasPermission('flow:model:add')" @click="toView">新增
            </el-button>
          </template>
          <template #column>
            <el-table-column type="index" label="#" fixed="left" align="center">
              <template #default="scope">
                {{ initIndex(scope.$index) }}
              </template>
            </el-table-column>
            <el-table-column prop="key" label="标识" />
            <el-table-column prop="name" label="名称" />
            <el-table-column prop="category" label="类型" width="80" />
            <el-table-column prop="version" label="版本号" align="center" width="80"
              :formatter="(row: any) => 'v:' + row.version" />
            <el-table-column prop="deploymentId" label="状态" align="center" width="80">
              <template #default="scope">
                <el-tag type="success" size="small" v-if="scope.row.deploymentId">已发布</el-tag>
                <el-tag type="danger" size="small" v-else>未发布</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="150" align="center"
              :formatter="(row: any) => $moment(row.createTime, 'YYYY-MM-DD HH:mm')" />
            <el-table-column prop="description" label="描述" />
            <el-table-column label="操作" fixed="right" width="200" align="center">
              <template #default="scope">
                <el-button-group>
                  <el-button type="primary" icon="el-icon-edit" size="small" title="设计"
                    v-if="$hasPermission('flow:model:view')" @click="toView(scope.row)" />
                  <el-button type="danger" icon="el-icon-delete" size="small" title="删除"
                    v-if="$hasPermission('flow:model:delete')" @click="del(scope.row)" />
                  <el-button type="info" icon="el-icon-finished" size="small" title="发布"
                    v-if="$hasPermission('flow:model:deploy') && !scope.row.deploymentId" @click="deploy(scope.row)" />
                  <el-button type="success" icon="el-icon-download" size="small" title="导出"
                    @click="exportModel(scope.row)" />
                </el-button-group>
              </template>
            </el-table-column>
          </template>
        </autumn-table>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import { pageModel, viewModel, deleteModel, deployModel } from 'src/api/flow/activiti'
import useTable from 'src/hooks/useTable'
import { $hasPermission, $confirmMsg, $moment, $exportFlowUrl } from 'src/hooks/useCommon'

const { page, initIndex } = useTable()

// 分页查询
const queryInfo = reactive({
  key: '',
  name: ''
})
const changePage = function (pageNumber: number, pageSize: number) {
  page.pageNumber = pageNumber
  page.pageSize = pageSize
  pageModel({ ...queryInfo, pageNumber, pageSize }).then(({ data }) => {
    page.data = data.list
    page.total = data.total
  })
}
const search = function () {
  changePage(1, 10)
}
search()

// 删除
const del = function (row: any) {
  const id = row.id
  $confirmMsg('该操作将关联删除历史信息，确认删除吗？', () => {
    deleteModel(id).then(() => {
      search()
    })
  })
}

const deploy = (row: any) => {
  const id = row.id
  $confirmMsg('确认发布吗？', () => {
    deployModel(id).then(() => {
      search()
    })
  })
}

const exportModel = (row: any) => {
  window.open($exportFlowUrl(row.id), '_blank')
}

// 查看
const router = useRouter()
const toView = async (row: any) => {
  const id = row.id

  const temp: any = {}
  if (id) {
    const { data } = await viewModel(id)
    temp.id = data.id
    temp.key = data.key
    temp.name = data.name
    temp.editor = data.editor
  }
  router.push({
    path: '/flow/model/modelForm',
    query: temp
  })
}
</script>

<style lang="scss" scoped>
</style>
